<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>{{addressId && (!isOther)?'修改':'新增'}}收货地址</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line" v-if="!addressId">
          <span class="lab"><i class="mark_icon"  v-if="!$route.query.userId">*</i>用户：</span>
          <div :class="{'error_border':tip_num===1}">
            <userSelect @listenToUser="getUserId" :uId="userId" v-if="!$route.query.userId"/>
            <p v-else>{{$route.query.username}}</p>
          </div>
        </div>

        <div class="line" v-if="addressId">
          <span class="lab">用户：</span>
          <div :class="{'error_border':tip_num===1}">
            <p>{{userName}}{{remark ? `(${remark})` :''}}{{(!userName)&&(!remark) ? '——' :''}}</p>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>收货地址：</span>
          <div :class="{'error_border':tip_num===2}">
            <el-input type="textarea" placeholder="请输入收货地址" v-model.trim="address" @input="setTip('','')" :autosize="{ minRows: 2, maxRows: 6}" resize="none"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab">详细地址：</span>
          <div >
            <el-input type="textarea" placeholder="请输入详细地址" v-model.trim="addressInfo" @input="setTip('','')" :autosize="{ minRows: 2, maxRows: 6}" resize="none"></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>门牌号：</span>
          <div :class="{'error_border':tip_num===3}">
            <el-input type="text" placeholder="请输入门牌号" v-model.trim="house" @input="setTip('','')"></el-input>
          </div>
        </div>


        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>收货人：</span>
          <div>
            <el-input type="text" placeholder="请输入收货人名称" :class="{'error_border':tip_num===4}" v-model.trim="userName"
                      @input="setTip('','')"></el-input>
          </div>
        </div>
        <div class="line">
          <span class="lab"><i class="mark_icon">*</i>电话号码：</span>
          <div :class="{'error_border':tip_num===5}">
            <el-input type="number"  placeholder="请输入收货人电话" v-model.trim="phone" @input="setTip('','')" maxlength="11" ></el-input>
          </div>
        </div>

        <div class="line">
          <span class="lab">是否需要爬楼：</span>
          <div>
            <el-radio-group v-model="isExtra">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
        </div>

        <div class="line">
          <span class="lab">设为默认：</span>
          <div>
            <el-radio-group v-model="isDefault">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
        </div>

<!--        <div class="line">-->
<!--          <span class="lab">状态：</span>-->
<!--          <div>-->
<!--            <el-radio-group v-model="proStatus">-->
<!--              <el-radio :label="1">可用</el-radio>-->
<!--              <el-radio :label="0">禁用</el-radio>-->
<!--            </el-radio-group>-->
<!--          </div>-->
<!--        </div>-->
        <p class="error_line">{{infoTip}}</p>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="confirmEdit">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetail, addData, updateData } from "@/api/data/user/address";
import {getAllWarehouse} from "@/api/basic/warehouse";
import commons from "../../../utils/common";
import userSelect from '../../../components/user/index.vue'

export default {
  components:{
    userSelect
  },
  props:['addressId','isOther','remark'],
  data(){
    return {
      userName: '',
      userId:this.addressId ? this.addressId :'',
      userOption:[],
      warehouseOption:[],
      proStatus:1,
      phone:'',
      address:'',
      isExtra:0,
      isDefault:0,
      house:'',
      addressInfo:'',
      infoTip: '',
      tip_num: '',
      loading:false
    }
  },
  mounted() {
    if (this.$route.query.userId){
      this.userId = this.$route.query.userId;
    }

    this.getAllHouse();
    if (this.addressId && (!this.isOther)){
      this.getDetail();
    }
  },
  methods:{
    getDetail(){
      let that = this;
      this.loading = true;
      getDetail(that.addressId).then(res => {
        if (res){
          that.setData(res);
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },

    setData(obj){
      this.userName=obj.userName?obj.userName:'';
      this.userId = obj.userId?obj.userId:'';
      this.proStatus= obj.enable?obj.enable:0;
      this.house = obj.house ? obj.house :'';
      this.phone = obj.phone?obj.phone:'';
      this.address = obj.address?obj.address:'';
      this.isExtra = obj.isExtra?obj.isExtra:0;
      this.isDefault = obj.isDefault?obj.isDefault:0;
      this.addressInfo = obj.addressInfo ? obj.addressInfo : ''
    },

    getAllHouse(){
      let that = this;
      getAllWarehouse('').then(res=>{
        that.warehouseOption = res ? res: [];
      }).catch((e)=>{
        that.warehouseOption = [];
      })
    },

    getUserId(e){
      this.userId = e;
    },

    // 确认编辑
    confirmEdit(){
      if (this.userId === '') {
        this.setTip(1, '请选择收货用户！');
      }else if (this.address==='') {
        this.setTip(2, '请输入收货地址！');
      } else if (this.house==='') {
        this.setTip(3, '请输入门牌号！');
      }else if (this.userName === '') {
        this.setTip(4, '请输入收货人名称！');
      }else if (this.phone==='') {
        this.setTip(5, '请输入收货人手机号！');
      } else if (this.phone!==''&& (!commons.judgePhone(this.phone))) {
        this.setTip(5, '手机号格式不正确！');
      } else {
        this.sendInfo();
      }
    },

    sendInfo(){
      let that = this;
      that.loading = true;
      let data = {
        // enable: that.proStatus,
        name: that.userName,
        phone: that.phone,
        userId:that.userId,
        isExtra:that.isExtra,
        house:that.house,
        address:that.address,
        isDefault:that.isDefault,
        addressInfo:that.addressInfo
      }
      if (that.addressId && (!this.isOther)) {
        data.id = that.addressId;
        updateData(JSON.stringify(data)).then(response => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      } else {
        addData(JSON.stringify(data)).then(response => {
          that.closePopup(true);
          that.$message.success({
            message:'操作成功！',
            duration:1500
          });
          that.loading = false;
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    setTip(num,text){
      this.tip_num = num;
      this.infoTip = text
    },

    // 关闭
    closePopup(refresh){
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>

</style>
